<template>
  <div class="yoyo-wangEditor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editor-style"
      style="height: 300px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
  name: 'index',
  props:{
    content:{
      type: String,
      default: '',
    }
  },
  // 图片、视频上传，需要配置服务器地址
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
    }
  },
  watch:{
    content:{
      deep: true,
      handler(val){
        this.valueHtml = val
      }
    }
  },
  computed:{
    valueHtml:{
      get() {
        return this.content
      },
      set(val){
        // 防止富文本内容为空时，校验失败
        if(this.editor.isEmpty()){
          val = ''
        }
        this.$emit('setContent',val)
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="scss" scoped>
.yoyo-wangEditor{
  border: 1px solid #ccc;
}
</style>
